﻿.ranking-page {
	padding: 20rpx;
	background: #f6f6f6;
	min-height: 100vh;
}

.page-header {
	text-align: center;
	padding: 40rpx 0;
	background: #fff;
	border-radius: 16rpx;
	margin-bottom: 20rpx;
}

.header-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 10rpx;
}

.header-subtitle {
	font-size: 28rpx;
	color: #666;
}

.top-three-section {
	background: #fff;
	border-radius: 16rpx;
	padding: 40rpx 20rpx;
	margin-bottom: 20rpx;
}

.podium {
	position: relative;
	width: 100%;
	height: 300rpx;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.podium-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: absolute;
	width: 200rpx;
	
	&.first {
		left: 50%;
		transform: translateX(-50%);
		z-index: 3;
		.podium-avatar {
			width: 120rpx;
			height: 120rpx;
		}
		.podium-rank {
			background: linear-gradient(135deg, #FFD700, #FFA500);
		}
	}
	
	&.second {
		left: 50%;
		transform: translateX(-250rpx);
		z-index: 2;
		.podium-avatar {
			width: 100rpx;
			height: 100rpx;
		}
		.podium-rank {
			background: linear-gradient(135deg, #C0C0C0, #A0A0A0);
		}
	}
	
	&.third {
		left: 50%;
		transform: translateX(50rpx);
		z-index: 1;
		.podium-avatar {
			width: 100rpx;
			height: 100rpx;
		}
		.podium-rank {
			background: linear-gradient(135deg, #CD7F32, #B8860B);
		}
	}
}

.podium-rank {
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32rpx;
	font-weight: bold;
	color: #fff;
	margin-bottom: 20rpx;
}

.podium-avatar {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	overflow: hidden;
	margin-bottom: 15rpx;
}

.avatar-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.podium-name {
	font-size: 24rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 8rpx;
	text-align: center;
	width: 180rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 1.2;
}

.podium-count {
	font-size: 24rpx;
	color: #666;
	margin-bottom: 10rpx;
}

.podium-medal {
	width: 40rpx;
	height: 40rpx;
}

.medal-img {
	width: 100%;
	height: 100%;
}

.ranking-list {
	background: #fff;
	border-radius: 16rpx;
	overflow: hidden;
}

.list-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx;
	border-bottom: 2rpx solid #f0f0f0;
}

.header-text {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.header-count {
	font-size: 24rpx;
	color: #666;
}

.list-content {
	padding: 0 30rpx;
}

.ranking-item {
	display: flex;
	align-items: center;
	padding: 30rpx 0;
	border-bottom: 2rpx solid #f8f8f8;
	
	&:last-child {
		border-bottom: none;
	}
	
	&.top-three-item {
		background: linear-gradient(90deg, rgba(255, 215, 0, 0.05), transparent);
	}
}

.item-rank {
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
	background: #f0f0f0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28rpx;
	font-weight: bold;
	color: #666;
	margin-right: 20rpx;
}

.top-three-item .item-rank {
	background: linear-gradient(135deg, #FFD700, #FFA500);
	color: #fff;
}

.item-avatar {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	overflow: hidden;
	margin-right: 20rpx;
}

.item-info {
	flex: 1;
}

.item-name {
	font-size: 30rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 8rpx;
	max-width: 400rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.item-desc {
	font-size: 24rpx;
	color: #666;
}

.item-medal {
	width: 40rpx;
	height: 40rpx;
}

.medal-icon {
	width: 100%;
	height: 100%;
}

.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 100rpx 0;
}

.empty-icon {
	width: 120rpx;
	height: 120rpx;
	margin-bottom: 20rpx;
	opacity: 0.5;
}

.empty-text {
	font-size: 28rpx;
	color: #999;
}

.loading-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 100rpx 0;
}

.loading-spinner {
	width: 60rpx;
	height: 60rpx;
	border: 4rpx solid #e0e0e0;
	border-top: 4rpx solid #007aff;
	border-radius: 50%;
	animation: spin 1s linear infinite;
	margin-bottom: 20rpx;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.loading-text {
	font-size: 28rpx;
	color: #666;
}